<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/file.css">
</head>

<body>
    <div class="container w">
        <div class="file">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">请选择文件:</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload">
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>
                    </div>
                </div>
            </form>
            <h3>文件将上传至共享资源</h3>
        </div>

    </div>
    <script src="./layui/layui.js"></script>
    <script>
        //Demo
        layui.use(['form', 'upload'], function () {
            var form = layui.form;
            var upload = layui.upload;

            upload.render({
                elem: '#upload'
                , accept: 'file'
                , url: '/api/upload/'
                , multiple: true
                , allDone: function (obj) { //当文件全部被提交后，才触发
                    console.log(obj.total); //得到总文件数
                    console.log(obj.successful); //请求成功的文件数
                    console.log(obj.aborted); //请求失败的文件数
                }
                , done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”

                }
            });

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</body>

</html>